<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" >

<head>
<meta charset="utf-8">
<title>佰林の用户登录注册</title>
<link rel="stylesheet" href="/css/style1.css">

    <style>

        #vcode{
            margin-top: 15px;
        }
        .label-wrapper{

        }
        .infoMsg{
            background-color: #E6A23C;
            height: 0px;
            border-radius: 10px;
            width: 200px;
            text-align: center;
            margin:10px auto ;
            line-height: 50px;
            transition: all .5s;
        }
    </style>
</head>

<body>
<!--    提示信息-->
    <div class="infoMsg"></div>
    <div class="content">
        <div class="form sign-in">
            <h2><a th:href="@{'/'}">佰林の餐厅</a></h2>
            <div>
                <label>
                <span>用户名</span>
                <input type="text" id="userLogin" name="username" />
            </label>
            <label>
                <span>密码</span>
                <input type="text" id="pwdLogin" name="password" />
            </label>
            <p class="forgot-pass"><a href="javascript:">忘记密码？</a></p>
            <button type="submit" class="submit" id="loginBtn">登 录</button>
            <button type="button" class="fb-btn">使用 <span>facebook</span> 帐号登录</button>
            </div>
           
        </div>
        <div class="sub-cont">
            <div class="img">
                <div class="img__text m--up">
                    <h2>还未注册？</h2>
                    <p>立即注册，发现大量机会！</p>
                </div>
                <div class="img__text m--in">
                    <h2>已有帐号？</h2>
                    <p>有帐号就登录吧，好久不见了！</p>
                </div>
                <div class="img__btn">
                    <span class="m--up">注 册</span>
                    <span class="m--in">登 录</span>
                </div>
            </div>
            <div class="form sign-up">
            	<form action="#" method="post">
            		<h2>立即注册</h2>
                <label class="label-wrapper">
                    <span>用户名</span>
                    <span class="userNameMsg"></span>
                    <input type="text" name="username" th:id="username" required/>
                </label>
                <label class="label-wrapper">
                    <span>密码</span>
                    <span class="passwordMsg"></span>
                    <input type="password" name="password" th:id="password"required/>
                </label>
                <label class="label-wrapper">
                    <span>邮箱</span>
                    <span class="emailMsg"></span>
                    <input type="email" name="email" th:id="email" required/>
                </label>
                <button type="button" class="submit" th:id ="regist-btn">注 册</button>
                </form>
                <p class="regMsg" style="text-align: center"></p>
            </div>

        </div>
    </div>
    <!--引入js文件-->
    <script src="js/script1.js"></script>
<!--jquery CDN-->
    <script crossorigin="anonymous" integrity="sha512-WNLxfP/8cVYL9sj8Jnp6et0BkubLP31jhTG9vhL/F5uEZmg5wEzKoXp1kJslzPQWwPT1eyMiSxlKCgzHLOTOTQ==" src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
    <script>
        /**
         * 登录
         */
       $('#loginBtn').click(function () {
           var userLogin =  $('#userLogin').val();
           var pwdLogin = $('#pwdLogin').val();
           if(userLogin.trim()&& pwdLogin.trim()){
               $.ajax({
                   url:'loginAndRegister/user/login',
                   type:'post',
                   data:JSON.stringify({
                       username: userLogin,
                       password: pwdLogin,
                   }),
                   contentType: "application/json;charset=UTF-8",
                   success: function(data){
                       if(typeof data === 'object'){
                           localStorage.setItem('userInfo',JSON.stringify(data))
                           sessionStorage.setItem('userInfo',JSON.stringify(data))
                           window.location.href='/toUserShowIndex';
                       }else if(data === 'stop'){
                           alert('用户已停用，请联系管理员')
                       } else if(data==='unDefind'){
                           alert('账号或密码不正确，请检查后尝试！')
                       }else{
                           alert('登录失败')
                       }}
               })
           }else{
               alert('账号密码不能为空')
           }

       })
        /**
         * 注册校验
         * **/
        let  userNameState = false;
        let  passwordState = false;
        let  emailState = false;
        $('#username').blur(function () {
            var username = $('#username').val();
            if(username.trim()===''){
                userNameState = false
                $('.userNameMsg').html('用户名不能为空').css('color','red')
            }else{
                $('.userNameMsg').html('')
                userNameState = true;
            }
        })

        $('#password').blur(function () {
            var password = $('#password').val();
            if(password.trim()===''){
                $('.passwordMsg').html('密码不能为空').css('color','red')
                passwordState = false;
            }else {
                $('.passwordMsg').html('')
                passwordState = true;
            }
        })

        $('#email').blur(function () {
            var email = $('#email').val();
            var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            if(email.trim()===''){
                $('.emailMsg').html('邮箱不能为空').css('color','red')
                emailState = false;
            }else if(reg.test(email)){
                $('.emailMsg').html('邮箱格式正确').css('color','green')
                emailState = true;
            }else{
                $('.emailMsg').html('邮箱格式错误').css('color','red')
                emailState = false;
            }

        })
       /**
        * 注册
        * **/
            $('#regist-btn').click(function(){
                if(userNameState && passwordState && emailState  ){
                    var username = $('#username').val();
                    var password = $('#password').val();
                    var email = $('#email').val();
                    $.ajax({
                        url:'loginAndRegister/user/regist',
                        type:'post',
                        data:{
                            username: username,
                            password: password,
                            email:email
                        },
                        success: function(data){
                            if(data === 'success'){
                                $('.infoMsg').html('注册成功').css('height','50px')
                                $('#username').val('');
                                $('#password').val('');
                                $('#email').val('')
                                setTimeout(function () {
                                    $('.infoMsg').alert('').css('height','0px')
                                },1000)
                                document.querySelector('.content').classList.toggle('s--signup');
                            }else if(data === 'exist'){
                                alert('此用户名已存在')
                                userNameState = false;
                            } else{
                                $('.regMsg').alert('注册失败')
                            }
                        }
                    })
            }else{
                    $('.regMsg').html('请将信息填写完整')
                }
        })

    </script>
</body>

</html>